﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Spread Sheet</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        var spreadNS = GcSpread.Sheets;
        spread.setSheetCount(3);

        spread.bind(spreadNS.Events.ActiveSheetChanged, function(e,args) {
            $("#activeSheetIndex").val(spread.getActiveSheetIndex());
        });
    
        $("#btnAddSheet").click(function () {
            spread.addSheet(spread.getSheetCount());
        });

        $("#btnRemoveSheet").click(function () {
            var activeIndex = spread.getActiveSheetIndex();
            if (activeIndex >= 0) {
                spread.removeSheet(activeIndex);
            }
        });

        $("#btnClearSheets").click(function () {
            spread.clearSheets();
        });

        $("#btnSetActiveSheetIndex").click(function () {
            var index = $("#activeSheetIndex").val();
            if (!isNaN(index)) {
                index = parseInt(index);
                if (0 <= index && index < spread.getSheetCount()) {
                    spread.setActiveSheetIndex(index);
                }
            }
        });
    });
    /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:580px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="button" style="width: 100px" value="Add Sheet" id="btnAddSheet" />
                <input type="button" style="width: 100px" value="Remove Sheet" id="btnRemoveSheet" />
                <input type="button" style="width: 100px" value="Clear Sheets" id="btnClearSheets" />
            </div>
            <div class="option-row">
                <label>ActiveSheetIndex:</label>
                <input type="text" id="activeSheetIndex" value="0"/>
                <input type="button" id="btnSetActiveSheetIndex" value="Set" />
            </div>
        </div>
    </div>
</body>
</html>
